<%-- 
    Document   : learning
    Created on : 19 Apr 12, 17:05:32
    Author     : Edgar Drake
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:useBean id="lis" class="main.LogicImageSegmentation" scope="application"/>
<%    // do the learn process here
    // call weka api functions here
    // get the data / option from the session
    // start doing something with learning
    // output something
    // output true if learning is successfull, otherwise false

%>
<%
    boolean useLog = Boolean.parseBoolean(request.getParameter("log"));
    String log = "";
    useLog = true;
    if (useLog) {
        log = lis.AccuracyLearningComparation();
    }
%>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Image Segmentation</title>
        <link href="css/style.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="js/jQuery.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script type="text/javascript" src="js/ajax.js"></script>
    </head>
    <body>
        <div class="main">
            <!--------------------- HEADER --------------------->
            <div class="header">
                <a class="title button inline" href="index.jsp"  >Learning</a>
            </div>
            <!---------------------- BODY ---------------------->
            <div class="body">
                <div class="contents">
                    <div class="inline">
                        <div id="select-classifier" class="inline">
                            <div class="classifier box">                        
                                <div class="weka">
                                    <div id="weka" class="title">
                                        WEKA Classifier
                                    </div>
                                    <div id="weka-class">
                                        <div class="">
                                            <form>
                                                <ul>                                                
                                                    <li id="w-id3" onclick="setRadioActive(0,'classify')">&Implies;<input type="radio" name="classify" value="1" checked="checked">ID3 Decision Tree</li>
                                                    <li id="w-knn" onclick="setRadioActive(1,'classify')">&Implies;<input type="radio" name="classify" value="2">K-Nearest Neighbors</li>
                                                    <li id="w-nby" onclick="setRadioActive(2,'classify')">&Implies;<input type="radio" name="classify" value="3">Naive Bayes</li>                                                
                                                </ul>
                                            </form>
                                        </div>
                                        <div ><a href="#" onclick="downloadModel(0)">download model</a></div>
                                    </div>
                                </div>
                                <div class="kage">
                                    <div id="kage" class="title">
                                        Kage Classifier
                                    </div>
                                    <div id="kage-class">
                                        <div class="">
                                            <form>
                                                <ul>
                                                    <li id="k-id3" onclick="setRadioActive(3,'classify')">&Implies;<input type="radio" name="classify" value="4" checked="checked">ID3 Decision Tree</li>
                                                    <li id="k-knn" onclick="setRadioActive(4,'classify')">&Implies;<input type="radio" name="classify" value="5">K-Nearest Neighbors</li>
                                                    <li id="k-nby" onclick="setRadioActive(5,'classify')">&Implies;<input type="radio" name="classify" value="6">Naive Bayes</li>
                                                </ul>
                                            </form>
                                        </div>
                                        <div ><a href="#" onclick="downloadModel(1)">download model</a></div>
                                    </div>
                                </div>                                
                            </div>
                            <div id="weka-knn" class="box">
                                <label># of neighbors</label>
                                <input type="text" name="weka-k" size="2" value="1"/>
                            </div>
                            <div id="kage-knn" class="box">
                                <label># of neighbors</label>
                                <input type="text" name="weka-k" size="2" value="1"/>
                            </div>
                            <div class="button" id="visualizewekaid3" style="margin: 10px auto;" onclick="visualizeWekaID3()">
                                Visualize weka id3
                            </div>
                            <div class="button" id="visualizekageid3" style="margin: 10px auto;" onclick="visualizeKageID3()">
                                Visualize kage id3
                            </div>
                            <div class="button" id="" style="margin: 10px auto;" onclick="testclassify()">
                                Auto fill *Demo only
                            </div>
                        </div>

                    </div>
                    <div class="inline">
                        <div class="box" id="log">
                            <div class="title">Log</div>
                            <div class="history">
                                <textarea id="logarea" rows="20" cols="90" > 
                                    <%
                                        if (useLog) {
                                            out.println("\n" + log);
                                        }
                                    %>
                                </textarea>
                            </div>
                        </div>
                        <div id="DO" class="learn-button" onclick="">Test to Classify</div>
                    </div>
                    <!--------------------------------------------------------->
                    <div id="classify-form">
                        <form action="" method="post" name="classify-test">
                            <div class="class-test-input">
                                <div class="LHS">region-centroid-col</div>
                                <div class="RHS"><input type="text" size="4" name="rcc"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">region-centroid-row</div>
                                <div class="RHS"><input type="text" size="4" name="rcr"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">region-pixel-count</div>
                                <div class="RHS"><input type="text" size="4" name="rpc"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">short-line-density-5</div>
                                <div class="RHS"><input type="text" size="4" name="sld5"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">short-line-density-2</div>
                                <div class="RHS"><input type="text" size="4" name="sld2"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">vedge-mean</div>
                                <div class="RHS"><input type="text" size="4" name="vm"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">vedge-sd</div>
                                <div class="RHS"><input type="text" size="4" name="vsd"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">hedge-mean</div>
                                <div class="RHS"><input type="text" size="4" name="hm"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">hedge-sd</div>
                                <div class="RHS"><input type="text" size="4" name="hsd"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">intensity-mean</div>
                                <div class="RHS"><input type="text" size="4" name="im"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">rawred-mean</div>
                                <div class="RHS"><input type="text" size="4" name="rrm"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">rawblue-mean</div>
                                <div class="RHS"><input type="text" size="4" name="rbm"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">rawgree-mean</div>
                                <div class="RHS"><input type="text" size="4" name="rgm"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">exred-mean</div>
                                <div class="RHS"><input type="text" size="4" name="erm"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">exblue-mean</div>
                                <div class="RHS"><input type="text" size="4" name="ebm"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">exgreen-mean</div>
                                <div class="RHS"><input type="text" size="4" name="egm"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">value-mean</div>
                                <div class="RHS"><input type="text" size="4" name="vam"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">saturation-mean</div>
                                <div class="RHS"><input type="text" size="4" name="sm"></div>    
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">hue-mean</div>
                                <div class="RHS"><input type="text" size="4" name="hm"></div>    
                            </div>
                            <div class="button" id="classifybutton" style="margin: 10px auto;" onclick="doClassify()">
                                CLASSIFY THIS!
                            </div>
                            <div class="button" id="relearnbutton" style="margin: 10px auto;" onclick="doLearningAgain()" hidden="hidden">
                                Add to training set and relearn again
                            </div>
                            <div class="class-test-input">
                                <div class="LHS">Resulting Class</div>
                                <div class="RHS">
                                    <ul>
                                        <li>
                                            <input type="radio" name="class" value="brickface"/>Brickface
                                            <input type="radio" name="class" value="sky"/>Sky
                                            <input type="radio" name="class" value="foliage"/>Foliage
                                            <input type="radio" name="class" value="cement"/>Cement
                                            <input type="radio" name="class" value="window"/>Window
                                            <input type="radio" name="class" value="path"/>Path
                                            <input type="radio" name="class" value="grass"/>Grass
                                        </li>
                                    </ul>
                                </div>    
                            </div>
                        </form>
                    </div>
                    <!--------------------------------------------------------->
                </div>
            </div>
            <!--------------------- FOOTER --------------------->
            <div class="footer">

            </div>
            <!-------------------------------------------------->
        </div>
        <%
            //if (useLog) {
            //  out.println("<script type='text/javascript'>");
            // log.replace("\n","\n\\");
            //out.println("var l = \""+log+"\";");
            //out.println("addToLog(l);");
            //out.println("alert('jamasoka');");
            //out.println("</script>");
            //}

        %>
    </body>
</html>

